<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的好友</title>
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
        <meta content="yes" name="apple-mobile-web-app-capable"/>
        <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
        <meta content="telephone=no" name="format-detection"/>
        <link href="/friend/css/style.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="/friend/js/jquery.min.js"></script>
        <script type="text/javascript" src="/friend/js/tab.js"></script>
        <script src="/js/plugins/jrender/jrender.min.js"></script>
        <script src="/js/common.js"></script>
    </head>

    <script>
        $(function () {
          var user = JSON.parse(sessionStorage.getItem("user"));
          $.get("/users",{fanId:user.id},function (follow) {
              console.log(follows);
              var json=({list:follow});
              $("#follows").renderValues(json,{
                  getHref:function (item,value) {
                      var href = $(item).data("href");
                      $(item).attr("href",href+value);
                  },
                  getId :function (item,value) {
                      $(item).attr("id","follow"+value);
                  }
              });
              //粉丝列表
          $.get("/users",{userId:user.id},function (fan) {
              var json2=({list:fan});
              $("#fans").renderValues(json2,{
                  getHref:function (item,value) {
                      var href = $(item).data("href");
                      $(item).attr("href",href+value);
                  },
                  getId :function (item,value) {
                      $(item).attr("id","fan"+value);
                  }
              });
              $.each(follow,function (index,ele) {
                  $.each(fan,function (index,fa) {
                  if(ele.id==fa.id){
                  var temp='<img src="/friend/images/icon-follow-001.jpg" alt="">\n' +
                      '                                        <p>相互关注</p>';
                     $("#follow"+ele.id).html(temp)
                     $("#fan"+fa.id).html(temp);
                  }
                  })
              });
          });

          });

        });
    </script>
    <body>

        <section class="aui-flexView">
            <header class="aui-navBar aui-navBar-fixed">
                <a href="javascript:history.go(-1);" class="aui-navBar-item">
                    <i class="icon icon-return"></i>
                </a>
                <div class="aui-center">
                    <span class="aui-center-title">我的好友</span>
                </div>
                <a href="javascript:;" class="aui-navBar-item">
                    <i class="icon icon-sys"></i>
                </a>
            </header>
            <section class="aui-scrollView">
                <div class="aui-tab-box" data-ydui-tab>
                    <ul class="tab-nav">
                        <li class="tab-nav-item tab-active">
                            <a href="javascript:;">我的关注</a>
                        </li>
                        <li class="tab-nav-item">
                            <a href="javascript:;">我的粉丝</a>
                        </li>
                    </ul>
                    <div class="tab-panel">
                        <div class="tab-panel-item tab-active" id="follows">
                            <div class="tab-item" render-loop="list">
                                <a data-href="/userProfiles.html?authorId="  render-key="list.id" render-fun="getHref" class="aui-list-item">
                                    <div class="aui-list-item-hd">
                                        <img render-src="list.headImgUrl" alt="">
                                    </div>
                                    <div class="aui-list-item-bd">
                                        <h4 render-html="list.nickName"></h4>
                                        <p render-html="list.sign"></p>
                                    </div>
                                    <span class="aui-list-item-fr" render-key="list.id" render-fun="getId">
                                        <img src="/friend/images/icon-follow-002.jpg" alt="">
                                        <p>已关注</p>
                                    </span>
                                </a>
                            </div>
                        </div>
                        <div class="tab-panel-item" id="fans">
                            <div class="tab-item" render-loop="list">
                                <a data-href="/userProfiles.html?authorId="  render-key="list.id" render-fun="getHref" class="aui-list-item">
                                    <div class="aui-list-item-hd">
                                        <img render-src="list.headImgUrl" alt="">
                                    </div>
                                    <div class="aui-list-item-bd">
                                        <h4 render-html="list.nickName"></h4>
                                        <p render-html="list.sign"></p>
                                    </div>
                                    <span class="aui-list-item-fr" render-key="list.id" render-fun="getId">
                                        <img src="/friend/images/icon-follow-003.jpg" alt="">
                                        <p style="color:#ce0000">加关注</p>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </section>
    </body>
</html>
